<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>Document</title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            li{
                list-style:none;
            }
            .m-video li{width:49%;float:left;margin-right:2%;margin-bottom:.2rem;color:#333;position: relative;}
            .m-video li video{position: absolute;width:100%;top: -1000px;}
            .i.play{position:absolute;width:60px;height:60px;left:50%;margin-left:-29px;top:50%;margin-top:-31px;background:url(img/play.png) 0 0 no-repeat rgba(0,0,0,.3);background-size:contain;box-shadow:0 0 3px rgba(0,0,0,.3);border-radius:30px;}
        </style>
    </head>
    <body>
        <ul class="m-video">
            <li class="videobox">
                <video width="100%" id="video1">
                    <source src="assets/demo.mp4" type="video/mp4">
                </video>
                <div class="video-poster">
                    <img src="img/poster.png">
                    <div class="i play"></div>
                </div>
                <p>Funniest Football Fails Compilation -- FailArmy</p>
            </li>
        </ul>
        <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <script>
            var myVideo = document.getElementById("video1");
                var videoBox = $(".videobox");
                videoBox.click(function(){
                    playPause();
                })
                // videoBox.onClick = function() {
                //     playPause()
                // }

                function playPause() {
                    if (myVideo.paused){
                        myVideo.play();
                    }
                    else{
                        myVideo.pause()
                    }
                }
        </script>
    </body>
</html>